<template>
        <tm-drawer :width="750" :height="766" :placement="pos" v-model:show="_show" @close="close"
            hideHeader="true">
            <view class="pop">
                <view class="heeader">
                    <view class="age">性别</view>
                    <image src="/static/userinfo/colse.png" class="close" @tap="closeDrawer"></image>
                </view>
                <view class="title">请选择您的性别</view>
                <view class="select">
                    <view class="select-box" v-for="(item, index) in gender" :key="index" @tap="onGetgender(item, index)">
                        <view class="img">
                            <image :src="item.selected ? item.newsimg : item.oldimg"></image>
                        </view>
                        <view class="title-img">
                            <image :src="item.icon" class="nan-icon"></image>
                            <view class="xingbie">{{ item.xingbie }}</view>
                        </view>
                    </view>
                </view>



                <view class="btn_box d-flex a-center j-center">
                    <view class="btn_main_r" style="width:650rpx;" @tap="onGetGenders">
                        <text class="text">确定</text>
                    </view>

                    <!-- <tm-button class="btn_main" :width="690" :shadow="0" :linear-color="['#64F1C5', '#29DBA3']"
                    linear="left" :fontSize="32" fontColor="#ffffff" @tap="onGetGenders" label="确定"></tm-button> -->

                </view>
            </view>
        </tm-drawer>
</template>
<script setup lang="ts">
import {
    ref,
    reactive,
    watch,
    nextTick,
    computed,
    onMounted,
    handleError,
    defineProps,
    defineEmits,
} from "vue";
import { onReady, onShow, onLoad, onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
const emit: any = defineEmits(['onClosegenderPopup', 'onGetGender']);
const props: any = defineProps({
    show: Boolean,
    sex:Number,
})
const pos = ref('bottom');
const _show = ref(false)

watch(()=>props.show,(val)=>{
    _show.value = val;
    if(props.sex===1){
        gender.value[0].selected = true
        gender.value[1].selected = false
    }
    if(props.sex===2){
        gender.value[1].selected = true
        gender.value[0].selected = false
    }
    
})



const close = ()=>{
    if(props.sex===1){
        gender.value[0].selected = true
        gender.value[1].selected = false
    }
    if(props.sex===2){
        gender.value[1].selected = true
        gender.value[0].selected = false
    }

    emit("onClosegenderPopup", false);
}


const gender: any = ref([{
    xingbie: "男",
    oldimg: '/static/userinfo/nanw.png',
    icon: '/static/userinfo/nan-icon.png',
    newsimg: "/static/userinfo/nan-z.png",
    selected: false,
    value:1,

}, {
    xingbie: "女",
    oldimg: '/static/userinfo/nvw.png',
    icon: '/static/userinfo/nv-icon.png',
    newsimg: "/static/userinfo/nv-z.png",
    selected: false,
    value:2,
}]);


// watch(()=>props.sex,(val)=>{
//     if(val===1){
//         gender.value[0].selected = true
//     }
//     if(val===2){
//         gender.value[1].selected = true
//     }
// })


const genders: any = ref("");
const onGetgender = (item: any, index: any) => {
    for (let i of gender.value) {
        i.selected = false;
    }
    gender.value[index].selected = true;
    genders.value = gender.value[index].value;
}
const closeDrawer = () => {
    if(props.sex===1){
        gender.value[0].selected = true
        gender.value[1].selected = false
    }
    if(props.sex===2){
        gender.value[1].selected = true
        gender.value[0].selected = false
    }
    emit("onClosegenderPopup", false);
}
const onGetGenders = () => {
    emit('onGetGender', genders.value);
    emit("onClosegenderPopup", false);
}
</script>
<style lang="scss" scoped>
.pop {

     padding-bottom: calc(constant(safe-area-inset-bottom) + 50rpx);
     padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);

    .heeader {
        width: 750rpx;
        height: 100rpx;
        position: relative;

        .age {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 100rpx;
            text-align: center;

        }

        .close {
            width: 36rpx;
            height: 36rpx;
            position: absolute;
            top: 32rpx;
            right: 30rpx;
        }
    }

    .title {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #333333;
        padding-left: 30rpx;
        box-sizing: border-box;
    }

    .select {
        width: 100%;
        height: 397rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .select-box {
            display: flex;
            flex-direction: column;
            align-items: center;

            .img {
                width: 160rpx;
                height: 160rpx;

                image {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }

            .title-img {
                display: flex;
                align-items: center;

                .xingbie {
                    font-size: 32rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    margin-left: 10rpx;
                }

                .nan-icon {
                    width: 36rpx;
                    height: 36rpx;
                }
            }


        }
    }

    .btn_box{
        width:750rpx;
        height:80rpx;
        margin-top:20rpx;
    }

    .btn_main {
        display: block;
        height: 80rpx;
        border-radius: 40rpx;
        line-height: 80rpx;
        z-index: 100;
    }

}
</style>